<template>
  <div>
    <div class="tips">
      <i class="iconfont icon-warnbk"></i>
      您填写的信息将做加密处理，仅做额度分配认证使用
    </div>
    <div class="progress">
      <h3>当前资料完整度：{{progress}}%</h3>
      <div class="chart">
        <div class="bar" ref="bar"><i ref="curBar"></i></div>
        <p>{{progress}}%</p>
      </div>
    </div>
    <div class="menus">
      <router-link :to="menu.link" v-for="(menu, index) in menus" :key="index">
        <i class="iconfont avatar" :class="menu.icon"></i>
        <div class="info">
          <h4>{{menu.title}}</h4>
          <p>{{menu.desc}}</p>
        </div>
        <i class="iconfont link" :class="menu.state === '0' ? 'icon-gengduo' : ''"><p>{{menu.status}}</p></i>
      </router-link>
    </div>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>

  export default {
    name: 'manage',
    data () {
      return {
        title: '担保人认证',
        progress: 0,
        menus: [
          {icon: 'icon-geren', title: '担保人身份信息', desc: '填写个人信息 实名认证', link: '/warrantor/step1', status: '', state: null},
          {icon: 'icon-shenfenzheng', title: '担保人身份验证', desc: '上传身份证正反面', link: '/warrantor/step2', status: '', state: null},
          {icon: 'icon-fangchan', title: '担保人附件信息', desc: '上传房产证等财产证明件', link: '/warrantor/step3', status: '', state: null}
        ]
      }
    },
    computed: {
      curStep () {
        return this.$store.state.warrantorStep
      }
    },
    methods: {
      // 返回
      back () {
        this.$router.push('/profile/manage')
      },
      // 获取填写信息的进度
      getCheckInfo () {
        this.axios.post('/api/guarantee/check_info_enroll', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        })
        .then((res) => {
          let desc = res.data.desc
          let state = desc.state
          let info = desc.info
          let base = info.base_check
          let check = info.check_status
          let att = info.attachment_status
          if (state === 0 && parseInt(att) !== 2) {
            this.$store.commit('warrantorStepSet', 4)
          } else {
            this.$store.commit('warrantorStepSet', state)
          }
          if (parseInt(att) === 2) {
            this.$store.commit('warrantorStepSet', 3)
          }
          if (parseInt(check) === 2) {
            this.$store.commit('warrantorStepSet', 2)
          }
          if (parseInt(base) === 2) {
            this.$store.commit('warrantorStepSet', 1)
          }
          this.menus[0].state = info.base_check
          this.menus[1].state = info.check_status
          this.menus[2].state = info.attachment_status
          this.menus[0].status = this.getStateText(info.base_check)
          this.menus[1].status = this.getStateText(info.check_status)
          this.menus[2].status = this.getStateText(info.attachment_status)
          this.setProgress()
        })
      },
      // 返回状态文本
      getStateText (num) {
        num = +num
        switch (num) {
          case 0:
            return ''
          case 1:
            return '已通过'
          case 2:
            return '未通过'
          case 3:
            return '审核中'
          default:
            return '已通过'
        }
      },
      // 设置每一项状态
      setProgress () {
        // 读取进度
        this.progress = (this.curStep - 1) * 33
        this.progress = this.progress > 98 ? 100 : this.progress
        // 进度动画
        let refs = this.$refs
        let barEle = refs.bar
        let curBar = refs.curBar
        let curWidth = barEle.offsetWidth / 3 * (this.curStep - 1)
        curBar.style.width = curWidth + 'px'
      }
    },
    created () {
      this.setTitle(this.title)
      // 获取所有的信息填写情况
      this.getCheckInfo()
    },
    mounted () {
      // 拿到 进入填写资料页面的凭证
      this.$store.commit('setAllWarrantorGetStatus')
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../styles/form.scss';
  .tips{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: rem(65);
    line-height: rem(65);
    background: #72a5ef;
    font-size: rem(26);
    color: #fff;
    i{
      margin-right: rem(10);
      font-size: rem(32);
    }
  }
  .progress{
    margin-bottom: rem(27);
    background: #fff;
    padding: rem(35) 0 rem(40);
    h3{
      margin-bottom: rem(32);
      font-size: rem(30);
      color: #141414;
      text-align: center;
      font-weight: bold;
    }
    .chart{
      display: flex;
      justify-content: center;
      align-items: center;
      .bar{
        position: relative;
        width: rem(560);
        height: rem(20);
        border-radius: 20px;
        background: #cee1fd;
        overflow: hidden;
        i{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 0;
          background: #72a5ef;
          transition: width 1s ease-out;
        }
      }
      p{
        margin-left: rem(10);
        font-size: rem(26);
        color: #141414;
        font-weight: bold;
      }
    }
  }
  .menus{
    a{
      margin-bottom: rem(20);
      padding: rem(30) rem(45) rem(30) rem(55);
      display: flex;
      align-items: center;
      background: #fff;
      .avatar{
        margin-right: rem(50);
        font-size: rem(72);
        color: #72a5ef;
      }
      .info{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h4{
          font-size: rem(30);
          color: #141414;
          font-weight: 700;
        }
        p{
          font-size: rem(24);
          color: #666;
        }
      }
      .link{
        font-size: rem(36);
        color: #72a5ef;
        p{
          font-size: rem(26);
        }
      }
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(100);
  }
</style>
